<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开始学习CSS</title>
    <style>
        .outer {
            border: 5px solid black;
        }

        .box {
            padding: 10px;
            width: 300px;
            width: calc(90% - 30px);
            background-color: rebeccapurple;
            color: white;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    
    <h1>我是一级标题</h1>

    <p>这是一个段落文本. 在文本中有一个 <span>span element</span> 
并且还有一个 <a href="http://example.com">链接</a>.</p>

    <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p>

    <ul>
        <li>项目1</li>
        <li class="special">项目2</li>
        <li>项目 <em>三</em></li>
    </ul>

    <h1>我是一级标题</h1>
    <p>
        <span>这是第二个一级标题后的</span>
        <span class="special">span element</span>
    </p>

    <div class="outer"><div class="box">
        The inner box is 90% - 30px
    </div></div>
</body>

</html>